<script setup>
import { RouterView, RouterLink, useRoute } from 'vue-router'
import { computed } from 'vue'

const route = useRoute()
const isHomePage = computed(() => route.path === '/')
</script>

<template>
  <div class="app-container">
    <header v-if="!isHomePage" class="app-header">
      <RouterLink to="/" class="home-link">
        <span class="home-icon">🏠</span> 返回首页
      </RouterLink>
    </header>
    
    <main>
      <RouterView />
    </main>
  </div>
</template>

<style>
/* 全局样式 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Arial', sans-serif;
  background-color: #f5f5f5;
  color: #333;
  line-height: 1.6;
}

.app-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.app-header {
  background-color: #fff;
  padding: 1rem 2rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 100;
}

.home-link {
  display: inline-flex;
  align-items: center;
  color: #333;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
}

.home-link:hover {
  color: #007bff;
}

.home-icon {
  margin-right: 0.5rem;
  font-size: 1.2rem;
}

main {
  flex: 1;
}
</style>
